<template>
  <div class="wrapper-right">
    <!-- <Title title="当日小区营销榜（营业部）" /> -->
    <div class="title-box">
      <Title title="当日小区营销榜（营业部）" />
      <i class="iconfont icon-diyi-"></i>
    </div>
    <div class="scroll-shell" v-if="tableData.length !== 0">
      <div class="self-department" v-if="selfDept">
        <div class="item cursor self-sales-department" @click="$emit('item-click', selfDept)">
          <!-- <div>当前营业部</div> -->
          <div class="info" >
            <div class="info-top">
              <div class="top-name">
                <i class="iconfont icon-ic_person_card24px"></i>
                {{ selfDept.deptName }}
              </div>
            </div>
            <div class="info-bottom">
              <div class="info-item">
                <div class="info-item-title">全量融合</div>
                <div class="info-item-value">
                  {{ selfDept.fullFusion }}</div>
              </div>
              <div class="info-item">
                <div class="info-item-title">FTTR</div>
                <div class="info-item-value">
                  {{ selfDept.fttr }}</div>
              </div>
              <div class="info-item">
                <div class="info-item-title">合计</div>
                <div class="info-item-value">
                  {{ selfDept.total }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="list">
        <div class="item"
          :class="{  'first-bgc': item.rank == 1,  'second-bgc': item.rank == 2,  'third-bgc': item.rank == 3}"
          v-for="(item, index) in tableData" :key="index" >
          <div class="rank">
            <img style="width: 50px;" v-if="item.rank == 1" src="@/assets/images/home/medal1.png" alt="">
            <img style="width: 50px;" v-else-if="item.rank == 2" src="@/assets/images/home/medal2.png" alt="">
            <img style="width: 50px;" v-else-if="item.rank == 3" src="@/assets/images/home/medal3.png" alt="">
            <!-- <el-tag class="rank-num" v-else type="info" effect="dark"> {{ item.rank }}</el-tag> -->
            <div class="rank-bg" v-else>
              <div class="rank-num">
                {{ item.rank }}
              </div>
            </div>
          </div>
          <div class="info">
            <div class="info-top">
              <div class="top-name"
                :class="{  'first-color': item.rank == 1,  'second-color': item.rank == 2,  'third-color': item.rank == 3}">
                <i class="iconfont icon-ic_person_card24px"></i>
                {{ item.deptName }}
              </div>
              <!-- <div class="top-number"
                :class="{  'first-color': item.rank == 1,  'second-color': item.rank == 2,  'third-color': item.rank == 3}">
                {{ item.number }}</div> -->
            </div>
            <div class="info-bottom">
              <div class="info-item">
                <div class="info-item-title">全量融合</div>
                <div class="info-item-value"
                  :class="{  'first-color': item.rank == 1,  'second-color': item.rank == 2,  'third-color': item.rank == 3}">
                  {{ item.fullFusion }}</div>
              </div>
              <div class="info-item">
                <div class="info-item-title">FTTR</div>
                <div class="info-item-value"
                  :class="{  'first-color': item.rank == 1,  'second-color': item.rank == 2,  'third-color': item.rank == 3}">
                  {{ item.fttr }}</div>
              </div>
              <div class="info-item">
                <div class="info-item-title">合计</div>
                <div class="info-item-value"
                  :class="{  'first-color': item.rank == 1,  'second-color': item.rank == 2,  'third-color': item.rank == 3}">
                  {{ item.total }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-empty v-if="tableData.length == 0" description="暂无数据"></el-empty>
  </div>
</template>

<script>
  import { countByRanking } from "@/api/home";
  import { getDeptTree } from "@/api/system/user";
  import { developVolume } from "@/api/api";
  import { businessDepartment } from "@/api/system/top";
  import store from "@/store";
  import Title from "./Title";
  export default {
    name: "HomeRight",
    components: { Title },
    props: {
      targetTime: null
    },
    watch: {
      targetTime: function (newVal, oldVal) {
        if (newVal == null || newVal == "") {
          this.postData.targetTime = this.formatDate();
        }
        else {
          this.postData.targetTime = newVal;
        }
        this.getAllBusinessDepartment(this.postData)
      }
    },
    data() {
      return {
        postData:
        {
          // deptId: 158,
          deptId: store.state.user.deptId, //将缓存的用户id赋值给userId，用于查询营销人员
          descending: true,
          targetTime: this.formatDate(),
        },
        tableData: [],
        timeList: [
          {
            value: "week",
            label: "最近一周",
          },
          {
            value: "month",
            label: "最近一个月",
          },
          {
            value: "quarter",
            label: "最近一个季度",
          },
          {
            value: "year",
            label: "最近一年",
          },
        ],
        //小区业务数据统计筛选条件
        communityBusiness: {
          salesDepartment: "雁南分局",
          baoQu: "",
          community: "",
          time: "",
        },

        //小区业务数据统计排名
        tableData:[],
        // tableData: [
        //   {
        //     salesman: "张三",
        //     number: "W123456",
        //     fullFusion: 2,
        //     fttr: 3,
        //     total: 5,
        //     rank: "1",
        //   },
        //   {
        //     salesman: "李四",
        //     number: "W123456",
        //     fullFusion: 2,
        //     fttr: 3,
        //     total: 5,
        //     rank: "2",
        //   },
        //   {
        //     salesman: "王五",
        //     number: "W123456",
        //     fullFusion: 2,
        //     fttr: 3,
        //     total: 5,
        //     rank: "3",
        //   },
        //   {
        //     salesman: "赵六",
        //     number: "W123456",
        //     fullFusion: 2,
        //     fttr: 3,
        //     total: 5,
        //     rank: "4",
        //   },
        //   {
        //     salesman: "赵六",
        //     number: "W123456",
        //     fullFusion: 2,
        //     fttr: 3,
        //     total: 5,
        //     rank: "5",
        //   },
        // ],
        tableDatacs: [
          {
            rank: "1",
            community: "W123456",
            accomplish: "113.33%",
            isOk: "是",
          },
          {
            rank: "2",
            community: "国泰嘉园",
            accomplish: "96.67%",
            isOk: "否",
          },
          {
            rank: "3",
            community: "兰宁小区",
            accomplish: "92.00%",
            isOk: "否",
          },
          {
            rank: "4",
            community: "南昌路经济适用房",
            accomplish: "72.00%",
            isOk: "否",
          },
          {
            rank: "5",
            community: "金雁花园",
            accomplish: "58.00%",
            isOk: "否",
          },
          {
            rank: "6",
            community: "地震局东岗西路家属院",
            accomplish: "56.00%",
            isOk: "否",
          },
          {
            rank: "7",
            community: "南昌路科苑一区家属楼",
            accomplish: "44.00%",
            isOk: "否",
          },
          {
            rank: "8",
            community: "南面滩安置房",
            accomplish: "25.00%",
            isOk: "否",
          },
          {
            rank: "9",
            community: "省广电总台专家公寓",
            accomplish: "13.33%",
            isOk: "否",
          },
          {
            rank: "10",
            community: "城关区天庆嘉园A区",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "11",
            community: "城关区天庆嘉园C区",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "12",
            community: "雁栖园",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "13",
            community: "红叶城",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "14",
            community: "康乐花园",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "15",
            community: "红星紫郡",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "16",
            community: "安居小区南区",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "17",
            community: "城关区政府家属院",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "18",
            community: "广电家园",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "19",
            community: "南河新省人民医院家属院村",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "20",
            community: "南河新村",
            accomplish: "0%",
            isOk: "否",
          },
        ],

        //营业部列表
        salesDepartmentList: [
          {
            value: 0,
            label: "营业部总量",
          },
          {
            value: 1,
            label: "红星营业部",
          },
          {
            value: 2,
            label: "张苏滩营业部",
          },
        ],
        baoQuListR: [],
        selfDept: {
            deptId: 219,
            deptName : "红星巷营业部",
            fttr: "0",
            fullFusion:"0",
            total:0,
        }
      };
    },
    created() {
      // this.getDeptTree(100);
      // this.countByRanking({ deptId: 100 });
      // this.getDevelopVolume(this.postData)
      this.getAllBusinessDepartment(this.postData);
    },
    methods: {
      formatDate(date = new Date()) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      },
      getAllBusinessDepartment(postData) {
        this.tableData = [];
        businessDepartment(postData).then((response) => {
          
          this.selfDept = response.data.selfDept[0]?? null;
          response.data.totals.forEach((item, index) => {
            this.tableData.push({
              rank: index + 1,
              deptName: item.deptName,
              deptId: item.deptId,
              fullFusion: item.fullFusion == '' ? 0 : item.fullFusion,
							fttr: item.fttr == '' ? 0 : item.fttr,
							total: item.total == '' ? 0 : item.total,
            })
          })
        })
      },

      getDevelopVolume(postData) {
        developVolume(postData).then((response) => {
          this.tableData = [];
          response.forEach((item, index) => {
            this.tableData.push({
              rank: index + 1,
              salesman: item.salesman,
              number: item.number,
              fullFusion: item.fullFusion,
              fttr: item.fttr,
              total: item.total,
            });
          });
        });
      },
      /** 查询部门下拉树结构 */
      async getDeptTree(deptId) {
        getDeptTree({ deptId: deptId }).then((response) => {
          var treeData = response.data.children;

          if (deptId == 100) {
            this.salesDepartmentList = [
              {
                deptName: response.data.deptName,
                deptId: response.data.deptId,
              },
              {
                deptName: response.data.children[0].deptName,
                deptId: response.data.children[0].deptId,
              },
              {
                deptName: response.data.children[1].deptName,
                deptId: response.data.children[1].deptId,
              },
            ];

            // console.log(this.salesDepartmentList, "树结构");
            // this.deptOptions = treeData;
          } else {
            this.baoQuListR = response.data.children;
          }
        });
      },
      countByRanking(data) {
        countByRanking(data).then((response) => {
          // console.log(response.data, "小区业务数据统计排名");
          response.data.sort((a, b) => {
            return (
              b.percent.substring(0, b.percent.length - 1) -
              a.percent.substring(0, a.percent.length - 1)
            );
          });
          response.data.forEach((item, index) => {
            /*  this.tableData.push({
              rank: index + 1,
              community: item.deptName,
              accomplish: item.percent,
              isOk: item.finished,
           }); */
          });
        });
      },
      //时间切换
      handleCommunityTime() {
        this.$message("数据完善中...");
      },
      //包区数据选中
      handleCommunityBusinessBaoquChange(value) {
        this.tableData = [];
        this.countByRanking({ deptId: value });
      },
      //小区业务数据统计排名
      handleCommunityBusinessChange(value) {
        this.baoQuListR = [];
        this.tableData = [];
        this.communityBusiness.baoQu = "";
        this.postData.deptId = value;
        this.countByRanking({ deptId: value });
        this.getDeptTree(value);
      },
      getRanking(rank) {
        if (rank == "1") {
          return "first";
        } else if (rank == "2") {
          return "second";
        } else if (rank == "3") {
          return "third";
        } else {
          return "other";
        }
      },
    },
  };
</script>

<style scoped lang="scss">
  @import url(//at.alicdn.com/t/c/font_4986911_3oe9fpbqr8d.css);

  .cursor{
    cursor: pointer;
  }

  .wrapper-right {
    width: 100%;
    height: 100%;

    /* overflow: scroll; */
    .title-box {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #409eff;

      i {
        font-size: 22px;
        margin-bottom: 13px;
      }
    }
  }

  .self-department{
    margin-bottom: 10px;

    .self-sales-department{
      background-color: #FFCCCC;
    }
  }

  .scroll-shell {
    height: 95%;
    overflow: scroll;
  }

  .list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    color: #303133;
  }

  .item {
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .rank {

      width: 45px;
      height: 45px;
      margin-right: 10px;

      .rank-bg {
        position: absolute;
        top: -20px;
        left: -20px;
        width: 70px;
        height: 70px;
        background-color: #c8c8c8;
        font-size: 20px;
        border-radius: 23px;

        .rank-num {
          position: absolute;
          top: 30px;
          left: 35px;
          font-size: 28px;
          color: #fff;
        }
      }
    }

    .info {
      width: 70%;

      .info-top {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .top-name {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;

          .iconfont {
            font-size: 24px;
            color: #3dc8fd;
            margin-right: 10px;
            font-weight: 400;
          }
        }

        .top-number {
          font-size: 18px;
          font-weight: 600;
        }
      }

      .info-bottom {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 5px;

        .info-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 16px;

          .info-item-title {
            margin-top: 5px;
            color: #3dc8fd;
          }

          .info-item-value {
            margin-top: 5px;
            font-size: 20px;
          }

        }
      }
    }
  }

  .first-color {
    color: #fcb521;
  }

  .second-color {
    color: #98aabc;
  }

  .third-color {
    color: #dcac77;
  }

  .first-bgc {
    background-color: #fff9db;
  }

  .second-bgc {
    background-color: #ffebeb;
  }

  .third-bgc {
    background-color: #f8f0e0;
  }

  @media (max-width: 768px) {
    .list {
      height: 65vh;
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

  }
</style>
